<template>
<div class="menutree">
    <!-- 批量操作 -->
    <div class="action-btn">
		<Button size="small" @click="showModal(0)" type="success">添加菜单</Button>
    </div>
    <Table border height="650" ref="menuTree" row-key="id" :columns="tableColumn" :data="dataList" :loading="dataLoading">
		<template #sort="{row}">
			<InputNumber v-model="row.sort" size="small" :min="0" @on-change="sortDetail(row.id,$event)" />
		</template>
		<template #display="{row}">
			<Tag v-if="row.display == 1" color="cyan">显示</Tag>
			<Tag v-if="row.display != 1" color="orange">隐藏</Tag>
		</template>
		<template #action="{ row }">
			<Button type="success" size="small" style="margin-right: 5px;float:left" @click="showModal(row.id)">子菜单</Button>
			<Button type="warning" size="small" style="margin-right: 5px;float:left" @click="showEdit(row.id)">修改</Button>
			<Button type="error" size="small" @click="removeDetail(row.id)">删除</Button>
		</template>
    </Table>
    <!-- 需要全屏时添加这句 :mask="false" class-name="idw100" -->
    <Drawer :closable="false" :mask-closable="false" :scrollable="true" title="详细信息" width="640" v-model="showModalStatus">
		<Spin size="large" fix v-if="loading"></Spin>
		<Form :label-width="80" ref="menuData" :model="detailInfo" :rules="menuValidate" action="javascript:void(0)">
			<FormItem label="父级菜单" prop="parentId" v-if="detailId != 0">
				<TreeSelect clearable v-model="detailInfo.parentId" :data="menuSelect" v-width="200"></TreeSelect>
			</FormItem>
			<FormItem label="菜单名称" prop="name">
				<Input v-model="detailInfo.name" placeholder="请输入权限菜单名称"></Input>
			</FormItem>
			<FormItem label="菜单URL" prop="url">
				<Input v-model="detailInfo.url" placeholder="请输入权限菜单URL"></Input>
			</FormItem>
			<FormItem label="菜单标签" prop="label">
				<Input v-model="detailInfo.label" placeholder="请输入权限菜单标签"></Input>
			</FormItem>
			<FormItem label="菜单图标">
				<Input v-model="detailInfo.icon" placeholder="请输入权限菜单图标"></Input>
			</FormItem>
			<FormItem label="显示状态">
				<Switch :true-value="1" :false-value="0" v-model="detailInfo.display">
					<template #open>显示</template>
					<template #close>隐藏</template>
				</Switch>
			</FormItem>
			<FormItem label="排序">
				<InputNumber :max="9999" :min="0" v-model="detailInfo.sort"></InputNumber>
			</FormItem>
			<FormItem>
				<Button style="margin-right: 8px" @click="handleReset('menuData')">取消</Button>
				<Button type="primary" @click="handleSubmit('menuData')">提交</Button>
			</FormItem>
		</Form>
	</Drawer>
</div>
</template>

<script>
export default {
	data() {
		return {
			dataLoading: true,
			detailInfo: {
				id: 0,
				parentId: 0,
				name: '',
				url: '',
				label: '',
				icon: '',
				display: 1,
				sort: 0
			},
			detailId:0,
			menuValidate: {
				name: [
					{ required: true, message: '菜单名称必须填写', trigger: 'blur' }
				],
				url: [
					{ required: true, message: '菜单地址必须填写', trigger: 'blur' }
				],
				label: [
					{ required: true, message: '菜单标签必须填写', trigger: 'blur' }
				]
			},
			dataList: [],
			tableColumn: [
				{
					title: 'Id',
					key: 'id',
					width: 60,
				},
				{
					title: '名称',
					minWidth: 300,
					key: 'name',
					tree: true,
				},
				{
					title: '排序',
					width: 100,
					slot: 'sort',
				},
				{
					title: '显示',
					width: 100,
					slot: 'display',
				},
				{
					title: '操作',
					key: 'action',
					width: 200,
					align: 'left',
					slot:"action",
				}
			],
			menuSelect: [],
			showModalStatus: false,
			loading: false,
		}
	},
	created: function() {
		this.getMenuTree();
	},
	methods: {
		handleSubmit(name) {
			this.$refs[name].validate((valid) => {
				if (valid) {
					this.loading = true;
					// 判断是添加还是修改
					if (this.detailId == 0) {
						this.$api.menu.create(this.detailInfo).then(res => {
                            // 更新左侧的树
                            this.getMenuTree();
                            this.showModalStatus = !this.showModalStatus
						}).finally(e=>{
                            this.loading = false;
                        });
					} else {
						this.detailInfo.id = this.detailId;
						this.$api.menu.update(this.detailInfo).then(res => {
                            // 更新左侧的树
                            this.getMenuTree();
                            this.showModalStatus = !this.showModalStatus
						}).finally(e=>{
                            this.loading = false;
                        });
					}
				}
			})
		},
		handleReset(name) {
			this.showModalStatus = !this.showModalStatus
			this.$refs[name].resetFields();
		},
		getMenuTree() {
			this.$api.menu.tree().then(res => {
				this.dataList = res.result
			}).finally(e=>{
                this.dataLoading = false;
            });
		},
		// 单条选中
		showEdit(id) {
			this.detailId = id;
			this.showModalStatus = !this.showModalStatus
			this.$api.menu.select().then(res => {
                this.menuSelect = res.result;
				this.$api.menu.detail({detailId:id}).then(res => {
                    this.detailInfo = res.result;
				});
			});
		},
		// 添加
		showModal(id) {
			this.detailId = 0;
			this.showModalStatus = !this.showModalStatus
			this.detailInfo = {
				id: 0,
				parentId: id,
				name: '',
				url: '',
				label: '',
				icon: '',
				display: 1,
				sort: 0
			};
			if (id != 0) {
				this.$api.menu.select().then(res => {
                    this.menuSelect = res.result;
				});
			}
		},
		// 修改
		removeDetail(id) {
			// 弹出提示
			this.$Modal.confirm({
				title: '警告',
				content: '<p>确认删除此菜单及所有下级菜单吗？</p><p>此操作不可恢复，三思而后行</p>',
				onOk: () => {
					this.$api.menu.remove({ detailId: id }).then(res => {
                        // 更新左侧的树
                        this.getMenuTree();
					});
				},
				onCancel: () => {
				}
			});
		},
		sortDetail(id,value){
			this.$api.menu.sort({ id: id, sort: value }).then(res => {
                this.getMenuTree();
			});
		}
	}
}
</script>
